<!doctype html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>房地产好价格计算表</title>
	<style>
		*{ margin: 0; padding: 0; box-sizing: border-box; }
		ul, ol{ list-style: none; }
		.container{ max-width: 100vw; width: 768px; margin: auto; }
		
		.summary{ padding-top: 20px; text-align: center; }
		.table-wrap{ margin: 20px 5px; box-shadow: 0 0 10px #333; border-radius: 2px; text-align: center; font-size: 16px; color: #222; overflow: hidden; }
		.table-wrap table{ width: 100%; border-color: #4472C4; }
		.table-wrap thead tr,
		.table-wrap .table-name{ background-color: #4472C4 !important; font-weight: bold; color: #EEE; }
		.table-wrap .table-name{ padding: 10px 0;}
		.table-wrap .table-name .sub-text{ font-size: 14px; color: #FF0; }
		.table-wrap tr{ line-height: 30px; }
		.table-wrap tr:nth-child(odd){ background-color: #E9EBF5; }
		.table-wrap tr:nth-child(even){ background-color: #CFD5EA; }
		.table-wrap input{ width: 100px; border: none; text-align: center; font-size: 16px; color: #f0f; }
		.table-wrap .value{ width: 100px; margin: auto; padding: 0 5px; text-align: right; color: blue; }
	</style>
</head>
<body>
<div id="root">
	<div class="container">
		<div class="summary">
			<h3>房地产好价格计算表-微淼(网页版)</h3>
			<h3><a href="weimiao/房地产好价格计算表.xlsx" download>xlsx下载</a></h3>
			<sub>唐诗洪 2020/10/8</sub>
			<h3 style="color: red">尚未开发完成...</h3>
		</div>
		<div class="table-wrap">
			<!--固定条件-->
			<div class="table-name">
				<div>固定条件</div>
				<div class="sub-text">（根据实际情况可修改，修改参数仍然可以计算出好价格）</div>
			</div>
			<table cellspacing="1">
				<thead>
				<tr>
					<th>序号</th>
					<th>名称</th>
					<th>计算值</th>
					<th>说明</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>1</td>
					<td>首付比例</td>
					<td><label><input type="number" v-model="m_3" max="100" min="0"></label></td>
					<td>默认值</td>
				</tr>
				<tr>
					<td>2</td>
					<td>贷款比例</td>
					<td><label><input type="number" v-model="m_4" max="100" min="0"></label></td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>银行贷款利率</td>
					<td><label><input type="number" v-model="m_5"></label></td>
					<td>默认中国的贷款利率</td>
				</tr>
				<tr>
					<td>4</td>
					<td>贷款期限（年）</td>
					<td><label><input type="number" v-model="m_6"></label></td>
					<td>默认最长的年限</td>
				</tr>
				<tr>
					<td>5</td>
					<td>其他费用占租金比例</td>
					<td><label><input type="number" v-model="m_7"></label></td>
					<td>默认每年的物业费管理费等加起来的成本，占年租金的10%</td>
				</tr>
				<tr>
					<td>6</td>
					<td>购房产生税费</td>
					<td><label><input type="number" v-model="m_8"></label></td>
					<td>包含中介费、契税等</td>
				</tr>
				<tr>
					<td>7</td>
					<td>十年期国债收益率中位值</td>
					<td><label><input type="number" v-model="m_9"></label></td>
					<td>默认值</td>
				</tr>
				</tbody>
			</table>
			
			<!--变动条件-->
			<div class="table-name">
				<div>变动条件</div>
				<div class="sub-text"></div>
			</div>
			<table cellspacing="1">
				<thead>
				<tr>
					<th>序号</th>
					<th>名称</th>
					<th>计算值</th>
					<th>说明</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>1</td>
					<td>房子目前价格(万元)</td>
					<td><label><input type="number" v-model="m_12"></label></td>
					<td>手动输入，实际值</td>
				</tr>
				<tr>
					<td>2</td>
					<td>房子面积（平方）</td>
					<td><label><input type="number" v-model="m_13"></label></td>
					<td>手动输入，实际值</td>
				</tr>
				<tr>
					<td>3</td>
					<td>单价(元/平方)</td>
					<td> <div class="value">{{format(c14)}}</div> </td>
					<td>自动计算得出</td>
				</tr>
				<tr>
					<td>4</td>
					<td>月租金（元）</td>
					<td><label><input type="number" v-model="m_15"></label></td>
					<td>手动输入，实际值</td>
				</tr>
				<tr>
					<td>5</td>
					<td>等额本息每月还款（元）</td>
					<td style="color:red">这个值待计算<div class="value">{{format(c16,2)}}</div> </td>
					<td>自动计算得出</td>
				</tr>
				</tbody>
			</table>
			
			<!--计算结果-->
			<div class="table-name">
				<div>计算结果</div>
				<div class="sub-text"></div>
			</div>
			<table cellspacing="1">
				<thead>
				<tr>
					<th>序号</th>
					<th>名称</th>
					<th>计算值</th>
					<th>说明</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>1</td>
					<td>实际净租金收益率</td>
					<td> <div class="value">{{format(c19,2,0.01)}}%</div> </td>
					<td>正为生钱资产，负为耗钱资产</td>
				</tr>
				<tr>
					<td>2</td>
					<td>好价格总价（万元）</td>
					<td> <div class="value">{{format(c20,2,10000)}}w</div> </td>
					<td></td>
				</tr>
				<tr>
					<td>3</td>
					<td>单价（元/平方）</td>
					<td> <div class="value">{{format(c21)}}</div> </td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>售租比</td>
					<td> <div class="value">{{format(c22)}}</div> </td>
					<td>大于540代表存在泡沫</td>
				</tr>
				</tbody>
			</table>
			
			<!--具体计算过程-->
			<div class="table-name">
				<div>具体计算过程</div>
				<div class="sub-text"></div>
			</div>
			<table cellspacing="1">
				<thead>
				<tr>
					<th></th>
					<th>事项</th>
					<th>数值</th>
					<th>说明</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>条件</td>
					<td>目前市价</td>
					<td> <div class="value">{{format(c25,2,10000)}}w</div> </td>
					<td></td>
				</tr>
				<tr>
					<td>条件</td>
					<td>贷款总额</td>
					<td> <div class="value">{{format(c26,2,10000)}}w</div> </td>
					<td>自动计算得出</td>
				</tr>
				<tr>
					<td>条件</td>
					<td>等额本息每月还款</td>
					<td> <div class="value">{{c27}}</div> </td>
					<td></td>
				</tr>
				<tr>
					<td>条件</td>
					<td>每年还本付息金额与贷款总额的比率</td>
					<td> <div class="value">{{format(c28,2,0.01)}}%</div> </td>
					<td>自动计算得出</td>
				</tr>
				<tr>
					<td>年租金净额</td>
					<td>年租金总额</td>
					<td> <div class="value">{{c29}}</div> </td>
					<td></td>
				</tr>
				<tr>
					<td>年租金净额</td>
					<td>其他费用</td>
					<td> <div class="value">{{c30}}</div> </td>
					<td></td>
				</tr>
				<tr>
					<td>年租金净额</td>
					<td>年按揭贷款本息</td>
					<td> <div class="value">{{format(c31)}}</div> </td>
					<td></td>
				</tr>
				<tr>
					<td>初始投资现金总额</td>
					<td>首付</td>
					<td> <div class="value">{{format(c32,2,10000)}}w</div> </td>
					<td>购房的首付</td>
				</tr>
				<tr>
					<td>初始投资现金总额</td>
					<td>购房产生的税费</td>
					<td> <div class="value">{{c33}}</div> </td>
					<td>自动计算得出</td>
				</tr>
				<tr>
					<td>净租金收益率</td>
					<td>实际净租金收益率</td>
					<td> <div class="value">{{format(c34,2,0.01)}}%</div> </td>
					<td>自动计算得出</td>
				</tr>
				<tr>
					<td>好价格</td>
					<td>十年期国债收益率中位值</td>
					<td> <div class="value">{{format(c35,3,0.01)}}%</div> </td>
					<td>自动计算得出</td>
				</tr>
				<tr>
					<td>好价格</td>
					<td>对应的最终好价格总价</td>
					<td> <div class="value">{{format(c36)}}</div> </td>
					<td>自动计算得出</td>
				</tr>
				<tr>
					<td>好价格</td>
					<td>好价格单位均价</td>
					<td> <div class="value">{{format(c37)}}</div> </td>
					<td>自动计算得出</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<script src="lib/vue.js"></script>
<script>
  /**
   * 房地产好价格计算表
   * 布局需要兼容H5&PC
   * 严格按照老师给出的表格
   * 计算问题,百分比统一换算成小数值; 10% === 0.1
   * 百分比的值需要 n*100/100 避免计算误差
   */
  new Vue({
    el: '#root',
    data: {
      // ========== 固定条件 ==========
      m_3: '30',
	  
      m_5: '4.9',
      m_6: '30',
      m_7: '10',
      m_8: '5',
      m_9: '3.8',
      // ========== 变动条件 ==========
      m_12: '350',
      m_13: '130',
	  
      m_15: '5000',
	  
    },
    computed: {
      // ========== 固定条件 ==========
	  c3 () {return this.format(this.m_3, 2, 100) },
      c4 () {return this.format(100 - this.m_3, 2, 100)},
      m_4 () {return 100 - this.m_3},
	  c5 () {return this.format(this.m_5, 2, 100) },
	  c6 () {return Number(this.m_6) },
	  c7 () {return this.format(this.m_7, 2, 100) },
	  c8 () {return this.format(this.m_8, 2, 100) },
	  c9 () {return this.format(this.m_9, 3, 100) },
	  // ========== 变动条件 ==========
	  c12 () {return this.m_12 * 10000 },
	  c13 () {return Number(this.m_13) },
      c14 () {return parseInt(this.c12 / this.c13)},
	  c15 () {return Number(this.m_15) },
      // c16 () {return this.PMT(this.c5 / 12, this.c6 * 12, this.c26) * -1},
      c16 () {return 13002.8},
	  // ========== 计算结果 ==========
      c19 () {return this.c34},
      c20 () {return this.c36},
      c21 () {return this.c37},
      c22 () {return this.c12 / this.c15},
	  // ========== 具体计算过程 ==========
      c25 () {return this.c12},
      c26 () {return this.c12 * this.c4},
      c27 () {return this.c16},
      c28 () {return this.c27 * 12 / this.c26},
      c29 () {return this.c15 * 12},
      c30 () {return this.c29 * this.c7},
      c31 () {return this.c25 * this.c4 * this.c28},
      c32 () {return this.c25 * this.c3},
      c33 () {return this.c25 * this.c8},
      c34 () {return (this.c29 - this.c30 - this.c31) / (this.c32 + this.c33)},
      c35 () {return this.c9},
      c36 () {return (this.c29 - this.c30) / ((this.c4 * this.c28) + ((this.c3 + this.c8) * this.c9))},
      c37 () {return this.c36 / this.c13},
    },
    methods: {
      PMT (rate, nper, pv, fv, type) {
        // console.log(rate, nper, pv, fv, type)
        return pv * (rate * (1 + rate) ** nper) / ((1 + rate) ** (nper - 1))
      
      },
      /**
	   * 数字格式化
       * @param value 数值
       * @param float 小数位数
       * @param Rate 倍数,用于单位换算 元=>万元 : 10000
       * @returns {number}
       */
      format (value, float = 0, Rate = 1) {
        return Math.round(value / Rate * 10 ** float) / 10 ** float
      },
      percent (value) {
        return (Math.round(value * 10000) / 100) + '%'
      },
    }
  })
</script>
</body>
</html>